<template>
	<!-- 行政区筛选器 -->
	<view>
		<picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange"
			:value="multiIndex" :range="listArray" :range-key="label">
			<view class="pickerBtn">
				选择
			</view>
		</picker>
	</view>
</template>

<script>
	import {
		getXzqhByQO,
		getJdxzByQO,
		getJwhByQO
	} from "@/utils/common-api.js"
	import commonTools from "@/utils/common-tools.js"
	let xzh = commonTools.getXzq()
	export default {
		data() {
			return {
				// 格式
				// listArray: [
				// 	// 第一列值
				// 	[{
				// 		"label": "广州市",
				// 		"children": [{
				// 				"label": "天河区",
				// 				"cityCommunity": [{
				// 					"label": "林和街"
				// 				}, {
				// 					"label": "人民街"
				// 				}]
				// 			},
				// 			{
				// 				"label": "天河区2",
				// 				"cityCommunity": [{
				// 					"label": "林和街2"
				// 				}, {
				// 					"label": "人民街2"
				// 				}]
				// 			}
				// 		]
				// 	}, {
				// 		"label": "佛山市",
				// 		"children": [{
				// 			"label": "顺德区",
				// 			"cityCommunity": [{
				// 				"label": "顺德区街道"
				// 			}]
				// 		}, {
				// 			"label": "三水区",
				// 			"cityCommunity": [{
				// 				"label": "三水区街道"
				// 			}]
				// 		}]
				// 	}],
				// 	// 第二列值
				// 	[{
				// 		"label": "天河区",
				// 		"cityCommunity": [{
				// 			"label": "林和街"
				// 		}, {
				// 			"label": "人民街"
				// 		}]
				// 	}, {
				// 		"label": "天河区2",
				// 		"cityCommunity": [{
				// 			"label": "林和街2"
				// 		}, {
				// 			"label": "人民街2"
				// 		}]
				// 	}],
				// 	// 第三列值
				// 	[{
				// 		"label": "林和街"
				// 	}, {
				// 		"label": "人民街"
				// 	}]
				// ],
				multiIndex: []
			}
		},
		props: {
			listArray: {
				type: Array,
				default: () => {
					return [
						[{
							dm: xzh.xzqhszDm,
							label: xzh.xzqhmc,
						}],
						[],
						[]
					]
				}
			},
			// 展示字段名称
			label: {
				type: String,
				default: "label"
			},
			// 是否开启获取居委会
			openGetJwh: {
				type: Boolean,
				default: false
			},
			// 默认选择下标
			mrIndex: {
				type: Array,
				default: () => {
					return []
				}

			},
		},
		watch: {
			// 复用数据
			listArray: {
				handler(newVal, oldVal) {
					this.getQjxzq()
				},
				deep: true,
				immediate: true
			},
		},
		methods: {
			// 获取区级行政区
			async getQjxzq() {
				let res = await getXzqhByQO({
					sjxzqhszDm: this.listArray[0][0].dm,
					showLoading: true
				})
				if (res.head.errorCode == "0") {
					this.listArray[1] = res.body.map(item => {
						return {
							dm: item.xzqhszDm,
							label: item.xzqhmc,
						}
					})
					this.$forceUpdate()
					if (this.mrIndex.length > 0) {
						await this.getJd(this.listArray[1][this.mrIndex[1]])
					} else {
						await this.getJd(this.listArray[1][0])
					}
				} else if (res.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}
			},
			//街道获取
			async getJd(val) {
				let res = await getJdxzByQO({
					xzqhszDm: val.dm,
					showLoading: true
				})
				if (res.head.errorCode == "0") {
					this.listArray[2] = []
					this.listArray[2] = res.body.map(item => {
						return {
							dm: item.jdxzDm,
							label: item.jdxzmc,
						}
					})

					this.$forceUpdate()
					this.multiIndex = this.mrIndex
					// console.log(this.listArray[2])
				} else if (res.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}

			},
			// 获取居委
			async getJwh(val) {
				let res = await getJwhByQO({
					jdxzDm: val.dm,
					showLoading: true
				})
				if (res.head.errorCode == "0") {
					this.$emit("getJwh", res.body)
					this.$forceUpdate()
				} else if (res.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}
			},
			// 某一列的值改变时触发 columnchange 事件
			async bindMultiPickerColumnChange(e) {
				if (e.detail.column == 1) {
					// console.log("触发2", this.listArray[1][e.detail.value])
					await this.getJd(this.listArray[1][e.detail.value])
				}
			},
			// 完成触发事件
			bindMultiPickerChange(e) {
				// console.log("触发", e.detail)
				let indexArr = e.detail.value
				let params = [
					this.listArray[0][e.detail.value[0]],
					this.listArray[1][e.detail.value[1]],
					this.listArray[2][e.detail.value[2]],
					e.detail.value
				]
				this.$emit("bindPickerChange", params)
				if (this.openGetJwh) {
					this.getJwh(params[2])
				}
			},
		}
	}
</script>

<style>
	.pickerBtn {
		padding: 10rpx 20rpx;
		background-color: #4285f4;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 24rpx;
	}
</style>